<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>数 据</title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.js"></script>


    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.js"></script>
</head>
<body>
<table id="table" lay-filter="data"></table>

<form class="layui-form" id="edit_dom" style="display:none">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input id="username" type="text" name="username" required lay-verify="required" placeholder="输入用户名"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
            <input id="email" type="email" name="email" required lay-verify="required" placeholder="输入邮箱"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码框</label>
        <div class="layui-input-inline">
            <input id="password" type="password" name="password" required lay-verify="required"
                   placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">悄悄地输入密码</div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <button id="div">提交</button>
</form>

<div id="test1">123123</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
</script>

<script th:inline=none>
    layui.use('table', function () {
        let table = layui.table;
        let form = layui.form;


        //实例
        table.render({
            elem: '#table'
            , height: 312
            , url: 'data' //数据接口
            , page: false //开启分页
            , cols: [[ //表头
                {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                , {field: 'username', title: '用户名', width: 80}
                , {field: 'password', title: '密码', width: 80}
                , {field: 'email', title: '邮箱', width: 80, sort: true}
                , {fixed: 'right', width: 118, title: '操作', align: 'center', toolbar: '#barDemo'}
                // ,{field: 'city', title: '城市', width:80}
                // ,{field: 'sign', title: '签名', width: 177}
                // ,{field: 'experience', title: '积分', width: 80, sort: true}
                // ,{field: 'score', title: '评分', width: 80, sort: true}
                // ,{field: 'classify', title: '职业', width: 80}
                // ,{field: 'wealth', title: '财富', width: 135, sort: true}
            ]]
        });


        // table.on('tool(data)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        //     var data = obj.data; //获得当前行数据
        //     var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        //     var tr = obj.tr; //获得当前行 tr 的DOM对象
        //
        //     if (layEvent === 'del') {
        //         //删除
        //         layer.confirm('真的删除：' + data.username + "用户吗?", function (index) {
        //
        //             console.log(index)
        //
        //             //向后端发送请求
        //             axios.post(`/delete/${data.id}`).then(function (data) {
        //                 console.log(data)
        //             })
        //
        //             //console.log(data.p_id);
        //             //向服务端发送删除指令
        //             // $.ajax({
        //             //     url: '../php/users.del.php',
        //             //     type: 'get',
        //             //     data: {'id': data.userId},//向服务端发送删除的id
        //             //     success: function (suc) {
        //             //         if (suc == 200) {
        //             //             obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
        //             //             layer.close(index);
        //             //             console.log(index);
        //             //             layer.msg("删除成功", {icon: 1});
        //             //         } else {
        //             //             layer.msg("删除失败", {icon: 5});
        //             //         }
        //             //     }
        //             // });
        //             // layer.close(index);
        //         });
        //
        //     } else if (layEvent === 'edit') {
        //         //编辑
        //         console.log(data);
        //         //获取需要弹出的表单
        //
        //         let test = document.getElementById('test1');
        //         console.log(test)
        //
        //         var data1 = obj.data;
        //         layui.form.val('example', {
        //             "userid": data1.userid
        //             , "username": data1.username
        //             , "view_data": data1.view_data
        //             , "manage_user": data1.manage_user
        //             , "manage_terminal": data1.manage_terminal
        //         });
        //         if (obj.event === 'edit') {
        //             layer.open({
        //                 type: 1, //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
        //                 // type: 2, //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
        //                 skin: 'layui-layer-lan',
        //                 area: ['1000px', '700px'],
        //                 title: ['修改用户内容', 'font-size:18px;'],
        //                 content: document.getElementById('edit_dom').innerHTML, //数组第二项即吸附元素选择器或者DOM
        //                 // content: '/toregister', //数组第二项即吸附元素选择器或者DOM
        //                 //shade: [0.8, '#393D49']
        //                 anim: 10, //动画
        //                 maxmin: true, //最大最小化
        //                 //tips: [4, '#c00']//未知
        //             });
        //         }
        //
        //
        //         // layer.open({
        //         //     type: 1,
        //         //     area: ['500px', '700px'],
        //         //     title: "更改信息",
        //         //     fixed: false, //不固定
        //         //     maxmin: true,
        //         //     maxmin: false,
        //         //     shadeClose: false,
        //         //     content: editContent
        //         // });
        //         // //表单值
        //
        //         //TODO 这里
        //         // form.val("usereditform", {
        //         //     "userid": data.userId,
        //         //     "userno": data.jobNo,
        //         //     "username": data.userName,
        //         //     "userpwd": data.pwd,
        //         //     "userclass": data.class
        //         // });
        //
        //
        //         //     //同步更新缓存对应的值
        //         //     layer.confirm('要修改ID为：'+data.userId+"的用户吗?", function(index){
        //         //         console.log(data.inexType);
        //         //         var useredit={
        //         //             "userId":data.userId,
        //         //             "jobNo":data.jobNo,
        //         //             "userName":data.userName,
        //         //             "pwd":data.pwd,
        //         //             "class":data.class
        //         //         };
        //         //         $.ajax({
        //         //         url:'../php/users.edit.php',
        //         //         type:'post',
        //         //         data:useredit,
        //         //                         //dataType:'json',
        //         //                         success:function(sess){
        //         //                     if(sess==200){
        //         //                         layer.msg("编辑成功",{icon:1});
        //         //                     }
        //         //                     else{
        //         //                         layer.msg("编辑失败",{icon:5});
        //         //                     }
        //         //                 },
        //         //                         error:function (xhr,status,error) {
        //         //                             console.log(xhr);
        //         //                             console.log(status);
        //         //                             console.log(error);
        //         //                         }
        //         //    });
        //         //     });
        //
        //     }
        // });

    })
</script>
</body>
</html>